<template>
	<view class="content">
		<view class="TCcontent">
			<view class="w85">
				<h5 class="fs16" style="padding: 30rpx 0 0 0rpx;font-weight: 700;">{{Setdata.name}}</h5>
				<view class="fs12" style="color: rgba(156,156,156,1);margin-top: 6rpx;">
					主食3选1，汉堡8选1，饮品5选1
				</view>
				<!-- 主食 -->
				<view style="margin-top: 30rpx;display: flex;line-height: 40rpx;">
					<h5 class="fs14">主食</h5><text class="fs12" style="color: rgba(156,156,156,1);">（2选1）</text>
				</view>
				<view class="Chishi">
					<view class="CSnum" v-for="item in 2">
						<view :class="item == num?'Select':''">
							<image src="../../../static/28a3b451f81986184a86281a4aed2e7389d4e6a0.jpg" mode=""></image>
							<text></text>
							<i></i>
						</view>
						<text class="fs12">秘制鸡块</text>
						<p class="fs12" style="color: rgba(193,193,193,1);">1份</p>
					</view>
				</view>
				<!-- 汉堡 -->
				<view style="margin-top: 10rpx;display: flex;line-height: 40rpx;">
					<h5 class="fs14">汉堡</h5><text class="fs12" style="color: rgba(156,156,156,1);">（8选1）</text>
				</view>
				<view class="Chishi">
					<view class="CSnum" v-for="item in 8">
						<view :class="item == num?'Select':''">
							<image src="../../../static/28a3b451f81986184a86281a4aed2e7389d4e6a0.jpg" mode=""></image>
							<text></text>
							<i></i>
						</view>
						<text class="fs12">某某汉堡</text>
						<p class="fs12" style="color: rgba(193,193,193,1);">1份</p>
					</view>
				</view>
				<!-- 饮品 -->
				<view style="margin-top: 10rpx;display: flex;line-height: 40rpx;">
					<h5 class="fs14">饮品</h5><text class="fs12" style="color: rgba(156,156,156,1);">（3选1）</text>
				</view>
				<view class="Chishi">
					<view class="CSnum" v-for="item in 3">
						<view :class="item == num?'Select':''">
							<image src="../../../static/28a3b451f81986184a86281a4aed2e7389d4e6a0.jpg" mode=""></image>
							<text></text>
							<i></i>
						</view>
						<text class="fs12">某某饮品</text>
						<p class="fs12" style="color: rgba(193,193,193,1);">1份</p>
					</view>
				</view>
			</view>
			<view class="pobtm" >
				<view class="poleft">
					<image style="width: 68rpx;height: 58rpx;padding: 12rpx 44rpx;" src="../../../static/icon8.png"
						mode=""></image>
					<view class="text33">
						<text calss="fs16s">18.8</text><text class="fs12"
							style="margin-left: 20rpx;text-decoration:line-through;">￥28.8</text><br>
						<text class="fs10">配送费￥2</text>
					</view>
				</view>
				<view class="poright center" >
					去结算
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:2,
				id: 0, //商品id
				Setdata:[],//商品详情数据
			}
		},
		onLoad(options) {
			this.id = options.id 
			this.getData(this.id)
		},
		methods: {
			getData(id){
				console.log(id)
				this.$request('api/store/goods/'+ id,{},"GET","").then(res => {
					console.log(res)
					this.Setdata = res.data.detail
				})
			}
		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 99;
	}

	.TCcontent {
		width: 100%;
		height: 80%;
		background: #FFFFFF;
		border-radius: 80rpx 80rpx 0 0;
		position: absolute;
		bottom: 0;
	}

	.w85 {
		width: 85%;
		margin: 0 auto;
	}

	.Chishi {
		width: 100%;
		display: flex;
		overflow: scroll;
	}

	.CSnum {
		width: 140rpx;
		margin-right: 62rpx;
	}

	.CSnum>view>image {
		width: 140rpx;
		height: 140rpx;
	}

	.Select {
		width: 140rpx;
		height: 140rpx;
		position: relative;
	}
	.Select>text{
		position: absolute;
		left: 0;
		width: 140rpx;
		height: 140rpx;
		background: rgba(0,0,0,0.7);
	}
	.Select>i{
		width: 30rpx;
		height: 30rpx;
		background: url(../../../static/iconv895.png);
		position: absolute;
		right: 16rpx;
		bottom: 16rpx;
	}
	.pobtm {
		width: 686rpx;
		height: 90rpx;
		border-radius: 90rpx;
		line-height: 90rpx;
		margin: 10rpx auto;
		display: flex;
		overflow: hidden;
	}
	
	.poleft {
		width: 492rpx;
		height: 90rpx;
		background: rgba(36, 188, 129, 1);
		position: relative;
		line-height: 30rpx;
		color: #FFFFFF;
	}
	
	.poright {
		width: 194rpx;
		height: 90rpx;
		background: #FFCB57;
		font-weight: 700;
		color: #333333;
	}
	
	.text33 {
		position: absolute;
		left: 130rpx;
		top: 10rpx;
	}
</style>
